import React from "react";
import { NavLink, Outlet } from "react-router-dom";

export default function Home() {

  // 修改isActive为true的高亮效果
  function computedClassName({isActive}) {
    return isActive ? 'nav-link atguigu' : 'nav-link';
  }

  return (
    <div>
      <h3>我是Home的内容</h3>
      <div>
        <ul className="nav nav-tabs">
          <li className="nav-item">
            <NavLink className={computedClassName} to="news">
              News
            </NavLink>
          </li>
          <li className="nav-item">
            <NavLink className={computedClassName} to="message">
              Message
            </NavLink>
          </li>
        </ul>
        {/* 指定路由组件呈现的位置 */}
        <Outlet/>
      </div>
    </div>
  );
}
